<!-- @format -->

<template>
  <UseSpace title="valibot校验初步学习  ---> Console.log"> </UseSpace>
</template>

<script setup>
  import * as v from 'valibot' // 1.24 kB
  import { onMounted } from 'vue'
  const LoginSchema = v.object({
    email: v.pipe(v.string(), v.email()),
    password: v.pipe(v.string(), v.minLength(8)),
  })

  const onSafeParse = () => {
    console.log('-- onSafeParse ')
    const result = v.safeParse(LoginSchema, {
      email: 'john.doe@example.com',
      password: '12345678',
    })
    if (result.success) {
      console.log('result.output ===>', result.output)
    } else {
      console.log('result.issues ===>', result.issues)
    }
  }

  const onParse = () => {
    console.log('-- onParse ')
    console.log('-- 校验emall ')
    try {
      const EmailSchema = v.pipe(v.string(), v.email())
      const email = v.parse(EmailSchema, '')
      console.log('email ===>', email)
    } catch (error) {
      console.log(error)
    }

    try {
      const StringArraySchema = v.array(v.string(), 'An array is required.')
      const ObjectArraySchema = v.array(v.object({ key: v.string() }))

      const theTestStringArr = ['111', '123', '123']
      const theTestObjArr = [
        { key: 'key', value: 'value' },
        {
          key: '111',
          value: '222',
        },
      ]
      console.log(
        'ObjectArraySchema ===>',
        v.parse(StringArraySchema, theTestStringArr),
      )

      console.log(
        'ObjectArraySchema ===>',
        v.parse(ObjectArraySchema, theTestObjArr),
      )
    } catch (error) {
      console.log(error)
    }
  }

  onMounted(() => {
    // onSafeParse()
    // onParse()
  })
</script>
